<template>
	<view class="wrap">
		<view class="content">
			<view class="content_top">
				<text class="customText">{{commodityTitle}}</text>
				<text class="customText">数量: {{count}}</text>
			</view>

			<view class="content_desc">
				{{commodityDesc}}
			</view>
             <view class="bottom-price">
				 <view class="customText">
				 	总价值: ¥{{totalPrice}}
				 </view>
				 <view class="customText">
				 	市场价: ¥{{totalAmount}}
				 </view>
			 </view>
			
		</view>
	</view>
</template>

<script>
	import homeTitle from '../layout/mmv-home-title.vue'
	export default {
		name: 'detail-commodity',
		components: {
			homeTitle,

		},
		props: {
			//商品名称
			commodityTitle: {
				type: String,
				default: '经租月租礼包'
			},
			//数量
			count: {
				type: String,
				default: '10'
			},
			//商品描述
			commodityDesc: {
				type: String,
				default: '经租月租礼包内容文案文案'
			},
			//市场价
			totalAmount: {
				type: String,
				default: '500'
			},
			totalPrice: {
				type:String,
				default:'0.00'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		margin-top: 20upx;
	}

	.content {
		padding: 26upx;
		background-color: #fff;
		border-radius: 16upx;

		&_top {
			@include flex;
			justify-content: space-between;
		}

		&_desc {
			color: #999999;
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			margin-top: 20upx;
		}

		&_price {
			display: flex;
			justify-content: flex-end;
		}
	}

	.customText {
		color: #333333;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;

	}
	
	.bottom-price {
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		
	}
</style>
